<script setup lang="ts" name="FlowAttr">
import FlowBaseAttr from "./FlowBaseAttr.vue";
import FlowBaseEvent from "./FlowBaseEvent.vue";
import type { Process, FlowDefNode } from "@/views/design/process/ProcessNodes";

const _value = defineModel<Process>();
const flowDef = defineModel<FlowDefNode[]>("flowDef");
const emits = defineEmits(["reload-flow"]);
const flowBaseAttrRef = ref(null);

const validate = () => {
  return flowBaseAttrRef.value.validate();
};

const handleReloadFlow = () => {
  emits("reload-flow");
};

defineExpose({ validate });
</script>

<template>
  <el-scrollbar>
    <el-tabs strench type="border-card">
      <el-tab-pane label="基本属性" name="0">
        <FlowBaseAttr
          ref="flowBaseAttrRef"
          v-model="_value"
          :flowDef="flowDef"
        />
      </el-tab-pane>
      <el-tab-pane lazy label="流程事件" name="1">
        <FlowBaseEvent
          v-model="_value"
          :defFlow="_value"
          @reload-flow="handleReloadFlow"
        />
      </el-tab-pane>
    </el-tabs>
  </el-scrollbar>
</template>

<style scoped></style>
